<template>
	<view>
		<view class="collect">
			<!-- nav -->
			<view class="collect_nav">
				<view class="nav_item " :class="indexNum == index?'nav_item_active active_af':''"
					v-for="item,index in navObj" :key="index" @click="getName(item.path,index)">{{item.title}}</view>
			</view>

		</view>
		<!-- 动态路由 -->
		<keep-alive>
			<component :data="menu" :notesList="notesList" :is="indexName"></component>
		</keep-alive>
		<!-- loading -->
		<compLoad :state="status"></compLoad>
	</view>

</template>

<script>
	import compLoad from '../../components/compLoad/compLoad.vue'
	import collectMenu from '../../components/collectMenu/collectMenu.vue';
	import collectNote from '../../components/collectNote/collectNote.vue';
	export default {
		data() {
			return {
				navObj: [{
					"title": "菜谱",
					"path": 'collectMenu'
				}, {
					"title": "笔记",
					"path": 'collectNote'
				}],
				indexName: "collectMenu", //动态路由传值
				indexNum: 0, //初始化
				status: true,
				menu: null,
				notesList: null,
			}
		},
		components: {
			collectMenu,
			collectNote,
			compLoad
		},
		watch: {
			indexNum(val) {
				console.log(val)
			}
		},
		created() {
			let timeStr = new Date().toLocaleDateString().split("/")
			// 截取 
			let t_one = timeStr[0].slice(2, 4)
			let arr = [t_one, this.repair(timeStr[1]), this.repair(timeStr[2])]
			// console.log(arr.join(""))
			// this.getData(arr.join(""))
			this.getData(2501602)
			// 30820591
			this.getDataNote(1)
		},
		methods: {
			getDataNote(k) {
				this.$axios(`home/notes/${k}/20?btmid=[11393964,30854435]`).then(res => {
					this.notesList = res.result.list;
					console.log( res.result.list)
				});
			},
			getName(k, p) {
				// console.log(k,p)
				this.indexName = k;
				this.indexNum = p
			},
			getData(k) {
				this.status = true;
				this.$axios({
					methods: 'get',
					url: `recipe/relatedinfo/${k}`
				}).then(res => {
					this.status = false;
					this.menu = res.result.notes
					console.log(res.result.notes)
				})
			},
			repair(k) {
				return k.length < 2 ? "0" + k : k
			}
		}
	}
</script>

<style lang="scss">
	.collect {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.collect_nav {
			width: 90%;
			height: 90rpx;
			margin: 0 auto;
			padding-top: 16rpx;
			display: flex;
			// justify-content: space-between;
			align-items: center;

			.nav_item {
				margin-right: 20rpx;
				color: #A0A0A0;
				position: relative;


			}

			.active_af::after {
				content: '';
				display: block;
				width: 70%;
				height: 8rpx;
				border-radius: 20rpx;
				background-color: #FFC830;
				position: absolute;
				bottom: -30%;
				left: 50%;
				transform: translate(-50%, 50%);

			}

			.nav_item_active {
				color: #000;
				font-weight: 400;
				animation: masked .3s linear;
			}
		}
	}

	// css 动画

	@keyframes masked {
		0% {
			transform: translate(0px, 0px);
		}

		25% {
			transform: translate(5rpx, 0px);
		}

		75% {
			transform: translate(-10rpx, 0px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}
</style>
